AULA 09 - Classes¶


AGENDA¶

  • Imports e exports
  • Introdução a Classes
  • Referências
  • Perguntas

1. Imports e exports¶

  • Para maiores esclarecimentos, consulte Souto, Mario (2021).

  • Sejam os módulos javascript:

    • pessoa.js
    • util.js
    • app.js
// pessoa.js utilizado default export
const pessoa = { nome: "Ana Paula", idade: 10 };
export default pessoa;                 // exportação padrão não nomeada

// OU 
export default {
    nome: "Ana Paula",
    idade: 10,    
};

// util.js utilizado named export
export const limpar = () => { ... } ;  // exportação nomeada limpar (utilizamos const ao inves de default)
export const baseDados = 10;           // exportação nomeada baseDados (utilizamos const ao inves de default)


// app.js                            
import pessoa from './pessoa.js';   // para exportação default, pode personalizar a importação. Nesse exemplo foi utilizado pessoa.
import pes from './pessoa.js';      // para exportação default, pode personalizar a importação. Nesse exemplo foi utilizado pes.
import {baseDados} from './util.js';  // nesse caso, é obrigatório utilizar o nome atribuído na exportação.
import {limpar} from './util.js';     // nesse caso, é obrigatório utilizar o nome atribuído na exportação.

// OU
import {baseDados, limpar} from './util.js';

2. Introdução a Classes¶

  • As classes são objetos javascripts com propriedades e métodos.
class Pessoa {
    nome = "Ana";         // um atributo da classe Pessoa (propriedade)
    call = () => { ... }. // um método da classe Pessoa
}

// utilização
const minhaPessoa = new Pessoa();
minhaPessoa.call();
console.log(minhaPessoa.nome);

2.1. Herança em javascript¶

  • O método constructor() pode ser usado para iniciar a construção de qualquer objeto de qualquer classe.
class Humano {
    constructor() {
        this.idade = 10;
    }
    imprimirIdade() {
        console.log(this.idade);
    }
}

humano = new Humano();
humano.imprimirIdade();



class Pessoa {
    constructor() {
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome() {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();
  • Modificando a classe Pessoa para usarmos herança
class Pessoa extends Humano{
    constructor() {
        super();   // método que indica que herdará do pai
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome() {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();
pessoa.imprimirIdade();

2.2. Utilizando Arrow functions¶

class Humano {
    constructor() {
        this.idade = 10;
    }
    imprimirIdade = () => {
        console.log(this.idade);
    }
}

humano = new Humano();
humano.imprimirIdade();



class Pessoa extends Humano {
    constructor() {
        super();   // método que indica que herdará do pai
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome = () => {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();
pessoa.imprimirIdade();

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.


ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>